<template>
  <div class="statistical-block">
    <div class="number-full-item" @click="show=true;siteName=item.name" v-for="item in list" :key="item.id">
      <div class="count-block">
        <div class="count">{{ item.count }}</div>
<!--        <div class="describe">{{moreType==1?'未就业':'就业困难'}}</div>-->
      </div>
      <div class="text">{{ item.name }}</div>
    </div>
    <Modal v-if="show" @closeModal="show=false" :level="2" :title="siteName+moreType==1?'未就业人员':'就业困难人员'" width="1300px" height="730px">
      <UnemploymentMoreDetail :moreType="moreType"></UnemploymentMoreDetail>
    </Modal>
  </div>
</template>

<script>
import Modal from "@/components/Modal/Modal.vue";
import {getNum} from "@/utils/utils";
import UnemploymentMoreDetail from "@/components/More/UnemploymentMoreDetail.vue";
export default {
  name: "UnemploymentMore",
  props:['moreType'],
  components: {UnemploymentMoreDetail, Modal},
  data(){
    return{
      list:[
        {id:1,name:'七墩乡',count:getNum(1,200,0)[0]},
        {id:2,name:'南岔镇',count:getNum(1,200,0)[0]},
        {id:3,name:'锁阳城镇',count:getNum(1,200,0)[0]},
        {id:4,name:'广至乡',count:getNum(1,200,0)[0]},
        {id:5,name:'瓜州镇',count:getNum(1,200,0)[0]},
        {id:6,name:'腰站子镇',count:getNum(1,200,0)[0]},
        {id:7,name:'河东镇',count:getNum(1,200,0)[0]},
        {id:8,name:'柳园镇',count:getNum(1,200,0)[0]},
        {id:9,name:'布隆吉乡',count:getNum(1,200,0)[0]},
        {id:10,name:'渊泉镇',count:getNum(1,200,0)[0]},
        {id:11,name:'梁湖乡',count:getNum(1,200,0)[0]},
        {id:12,name:'西湖镇',count:getNum(1,200,0)[0]},
        {id:13,name:'三道沟镇',count:getNum(1,200,0)[0]},
        {id:14,name:'沙河乡',count:getNum(1,200,0)[0]},
        {id:15,name:'双塔镇',count:getNum(1,200,0)[0]},
      ],
      show:false,
      siteName:'',
    }
  }
}
</script>

<style scoped lang="scss">
.statistical-block{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.number-full-item:nth-child(5n){
  margin-right: 0;
}
.number-full-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc((100% - 120px)/5);
  transform: scale(0.8);
  margin-right: 30px;
  margin-bottom: 30px;
  cursor: pointer;
  .count-block{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width:125px;
    height: 109px;
    background-size: auto 100%;
    background: url("/static/item.png") no-repeat center;
    margin-bottom: -3px;
    .count,.describe{
      color: #1beff0;
    }
    .count{
      font-size: 28px;
    }
    .describe{
      font-size: 14px;
    }
  }
  .text{
    width: 100%;
    height: 25px;
    background: #0786af;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
